﻿<div id="salarySetContainer" class="k-content">
	<div id="salarySetGrid" layoutH="0"></div>
	<script type="text/x-kendo-template" id="salarySetDetailTemplate">
        <div class="tabstrip">
            <ul>
                <li class="k-state-active">
                    工资设定明细
                </li>
            </ul>
            <div>
                <div class="salarySetDetailGrid"></div>
            </div>
        </div>
	</script>
	<script type="text/x-kendo-template" id="toolbarTemplate">
        <div class="toolbar">
			<label for="keywords">查询关键词：</label>
			<input type="text" class="k-textbox" id="keywords" style="width: 150px"/>
			<button class="k-button" action="search">查询</button>
			&nbsp;&nbsp;
			<button class="k-button" action="addset">调薪</button>
        </div>
	</script>

	<script>
		$(function() {
			var grid = $("#salarySetGrid").kendoGrid({
				dataSource: {
					type: "json",
					severFiltering: true,
					transport: {
						read: {
							url: "@Url.Action("Master")",
							data: {
								keywords: function() {
									return $("#salarySetContainer #keywords").val();
								}
							}
						}
					},
					pageSize: 20,
					serverPaging: true,
					serverSorting: false,
					schema: {
						total: function(response) {
							return response.Total;
						},
						data:function(response) {
							return response.Data;
						}
					}
				},
				toolbar: kendo.template($("#toolbarTemplate").html()),
				sortable: false,
				selectable: 'row',
				detailTemplate: kendo.template($("#salarySetDetailTemplate").html()),
				detailInit: detailInit,
				pageable: {
					messages: kendoPagerMessages
				},
				columns: [
					{
						field: "StaffCode",
						title: "员工编码",
						width: "100px"
					},
					{
						field: "FullName",
						title: "姓名",
						width: "100px"
					},
					{
						field: "Gender",
						title: "性别",
						width: "60px"
					},
					{
						field: "EntryDate",
						title: "入职日期",
						width: "120px"
					},
					{
						field: "Position",
						title: "担任职位",
						width: "120px"
					},
					{
						field: "Department",
						title: "所在部门",
						width: "120px"
					},
					{
						field: "Status",
						title: "状态",
					},
					{
						field: "SalarySetTimes",
						title: "调新次数",
					}
				]
			});

			grid.find(".k-button").click(function () {
				var action = $(this).attr("action");
				if (action == "search") {
					grid.data("kendoGrid").dataSource.read();
					return false;
				}

				if (action == "addset") {
					var kData = grid.data("kendoGrid");
					var row = kData.select();
					if (row.length == 0) {
						alert("请先选择一行记录再进行操作！");
						return false;
					}
					var data = kData.dataItem(row);
					var url = "@Url.Action("Create")" + "/" + data.StaffId;
					$.pdialog.open(url, "_blank", "为员工【" + data.FullName + "】设定工资参数", {
						max: false,
						mask: true,
						maxable: true,
						minable: true,
						fresh: true,
						resizable: false,
						drawable: true,
						close: '',
						param: '',
						width: 810,
						height: 480
					});
					return false;
				}

				return false;
			});

			function detailInit(e) {
				var detailRow = e.detailRow;

				detailRow.find(".tabstrip").kendoTabStrip({
					animation: {
						open: { effects: "fadeIn" }
					}
				});

				detailRow.find(".salarySetDetailGrid").kendoGrid({
					dataSource: {
						type: "json",
						transport: {
							read: {
								url: "@Url.Action("Detail")",
								data: {
									staffId: function() {
										return e.data.StaffId;
									}
								}
							}
						},
						group: { field: 'EffectiveDate', dir: "desc" },
						serverPaging: false,
						serverSorting: false,
						serverFiltering: true
					},
					scrollable: false,
					sortable: false,
					pageable: false,
					columns: [
						{ field: "EffectiveDate", title: "生效日期", hidden: true },
						{ field: "VariableName", title: "组成部分", width: "190px" },
						{ field: "Value", title: "数值", width: "110px" },
						{ field: "PartRemark", title: "备注" }
					]
				});
			}
		});
	</script>
</div>
